<!doctype html>
<!--
	作者：wrc4096@gmail.com
	时间：2017-10-11
	描述：书法字典页面，查询输入字
-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../../static/js/mui.min.js"></script>
		<link href="../../../static/css/mui.min.css" rel="stylesheet" />

		<link href="../../../static/css/common.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-inner-wrap mui-transitioning">
			<header class="mui-bar mui-bar-nav" style="height: 59px;background: #E3DDD4;">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="margin-top: 24px;color: #000000;"></a>
				<h1 class="mui-title" style="margin-top: 26px;">字库</h1>
			</header>
			<div class="mui-content"></div>
			<div class="character_library_search">
				<div style="width: 70%;float: left;">
					<input type="search" id="_font" style="height: 43px;border-top-left-radius: 20px;border-top-right-radius: 0px;border-bottom-left-radius: 20px;border-bottom-right-radius: 0px;" placeholder="请输入查询字">
				</div>
				<div style="width: 15%;float: left;">
					<button id="search_btn" onclick="searchResult()" style="background: #6e6545;height: 43px;margin-left: 0px;border-top-left-radius: 0px;border-top-right-radius: 20px;border-bottom-left-radius: 0px;border-bottom-right-radius: 20px;color: #FFFFFF;">查询</button>
				</div>
               
				<div style="width: 15%;float: left;">
					<a href="#popover">
						<button id="filter" style="height: 43px; margin-left: 5px;">筛选</button>
					</a>
				</div>
			</div>

			<div id="popover" class="mui-popover" >

				<ul class="mui-table-view mui-grid-view mui-grid-9 ">
					<li class="mui-table-view-cell ">
						<span style="color: #6E6545;">笔体</span>
						<br>
						<div class="mui-input-row mui-radio mui-left ">
						<label>毛笔</label>
						<input name="penType" type="radio" value="1" checked="checked">
						</div>
						<div class="mui-input-row mui-radio mui-left ">
						<label>硬笔</label>
						<input name="penType" type="radio" value="2">
						</div>
						<div class="mui-input-row mui-radio mui-left">
						<label>粉笔</label>
						<input name="penType" type="radio" value="3">
						</div>
						
					</li>
					<li class="mui-table-view-cell">
						<span style="color: #6E6545;">字体</span>
						<br>
						<div class="mui-input-row mui-radio mui-left">
						<label>隶书</label>
						<input name="bookType" type="radio" value="4">
						</div>
						<div class="mui-input-row mui-radio mui-left">
						<label>篆书</label>
						<input name="bookType" type="radio" value="5">
						</div>
						<div class="mui-input-row mui-radio mui-left">
						<label>楷书</label>
						<input name="bookType" type="radio" value="1" checked="checked">
						</div>
						<div class="mui-input-row mui-radio mui-left">
						<label>行书</label>
						<input name="bookType" type="radio" value="2">
						</div>
						<div class="mui-input-row mui-radio mui-left">
						<label>草书</label>
						<input name="bookType" type="radio" value="3">
						</div>
					</li>
				</ul>
			</div>

		</div>

		</div>
		<script src="../../../static/js/jquery-2.0.3.min.js"></script>

		<script type="text/javascript">
			mui.init()

			function searchResult() {
				var wordName = $("#_font").val();
				var bookType = $("input[name='penType']:checked").val();
				var wordType = $("input[name='bookType']:checked").val();

				if((wordName == null) || (wordName == "")) {
					mui.toast("请重新输入所查询的字");
				} else {
					//window.location.href = "../../phone/word/getResult?wordname="+wordName+"&booktype=" + bookType+ "&wordtype=" + wordType;
					$.ajax({
						type: "get",
						url: "../../phone/word/getWordController?wordname=" + wordName + "&booktype=" + bookType + "&wordtype=" + wordType,
						async: true,
						cache: false,
						success: function(reg) {
							var wordArr = [];
							for(key in reg) {
								wordArr.push(reg[key]);
							}
							console.log(wordArr);
							
							if(wordArr.length != null) {
								//window.location.href = "../../phone/word/getResult";
								var wordPhoto = wordArr[0];
								var wordVideo= wordArr[1];
								var shuoWen = wordArr[2];
								//$(".font_search).innerHTML = wordArr[2];
								var note1 = "1. " + wordArr[3][0];
								var note2= "2. " + wordArr[3][1];
								var note3= "3. " + wordArr[3][2];
								window.location.href = "../../phone/word/getResult?wordphoto="+wordPhoto+"&wordvideo=" + wordVideo+ "&shuowen=" + shuoWen + "&note1=" + note1 + "&note2=" + note2 + "&note3=" + note3;
					
								//document.getElementById("wn4").innerHTML = "4. " + wordArr[3][3];
								//document.getElementById("wordScore").innerHTML = wordArr[4];
							}
						},
						error: function() {
							mui.toast("该字不存在，请检查您的输入是否正确1");
						}
					});
					
				}
				
			}
		</script>
	</body>

</html>